<template>
    <div class="middel-box">
        <titleComponent title="商机调度"></titleComponent>
        <div class="center">
            <tabChange @clickTab="clickType" :duringTIme="2000" :openCycle="false" :btnTitle="btnTitle"
                :isRadioButton="true" class="group-tab"></tabChange>
            <div class="top-list">
                <div class="top-item" v-for="item, i in topList" :key="i">
                    <div class="num"
                        :style="{ backgroundColor: i == 0 ? '#ff3e33' : i == 1 ? '#ffa944' : i == 2 ? '#0ae7be' : '#0b82ff' }">
                        {{ i + 1 }}</div>
                    <div class="name">
                        {{ item.name }}
                    </div>
                    <div class="progress-box">
                        <progressBar :progress="item.value"
                            :backgroundColor="i < 3 ? '#0ae7be' : i < len ? '#0b82ff' : '#ffa944'" class="progress"
                            :radius="true" :bg="'#d4dffe'" />
                    </div>
                    <img :src="require(i < 3 ? '@/assets/img/icon2.png' : i < len ? '@/assets/img/icon4.png' : '@/assets/img/icon5.png')"
                        class="icon2" :style="i >= len ? { padding: '0 7px' } : {}" />
                    <div class="progress-text">
                        {{ changeType === 'ZB_DOUBLE_AMOUNT' || changeType === 'ZB_DOUBLE_COUNT' ? getCount(item.count)
                            :
                        item.value }}{{ changeType === 'ZB_DOUBLE_AMOUNT' || changeType === 'ZB_DOUBLE_COUNT' || changeType === 'CHU_BEI_PER' ? '' :
                            '%' }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import tabChange from '@/components/tabChange';
import titleComponent from "./titleComponent";
import progressBar from "@/components/progressBar";
import { getShangji } from '@/api/api'
export default {
    components: {
        titleComponent,
        tabChange,
        progressBar
    },
    data() {
        return {
            changeType: 'CHU_BEI_PER',
            btnTitle: [
                { name: '商机储备率', code: 'CHU_BEI_PER' },
                { name: '商机转换率', code: 'ZHUAN_HUAN_PER' },
                { name: '商机前置率', code: 'QIAN_ZHI_PER' },
                { name: '商机漏捕率', code: 'LOU_BU_PER' },
                { name: '复盘及时率', code: 'FU_PAN_PER' },
                { name: '中标破零区县占比', code: 'ZERO_ZB_QX_PER' },
                { name: '轻量级项目占比', code: 'PROJECT_EXPAND' },
                { name: '移动中标金额', code: 'ZB_DOUBLE_AMOUNT' },
                { name: '移动中标个数', code: 'ZB_DOUBLE_COUNT' }
            ],
            topList: [],
            len: 0,
            valueList: ["chuBeiPer", "zhuanHuanPer", "qianZhiPer", "louBuPer", "fuPanPer", "zeroZbQxPer", "projectExpand", "divisionResult", "division"]
        }
    },
    mounted() {
        this.changeList()
    },
    methods: {
        numberFormatter(num, digits) {
            const si = [
                { value: 1E8, symbol: '亿' },
                { value: 1E4, symbol: '万' }
            ]
            for (let i = 0; i < si.length; i++) {
                if (num >= si[i].value) {
                    return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
                }
            }
            return num.toString()
        },
        getCount(num) {
            return this.numberFormatter(num, 2);
        },
        clickType(type) {
            this.changeType = type
            this.changeList()
        },
        changeList() {
            getShangji({ type: this.changeType }).then(res => {
                let idx = this.btnTitle.findIndex(item => item.code === this.changeType)
                this.topList = res.map(item => {
                    return {
                        name: item.cityName,
                        value: this.changeType === 'CHU_BEI_PER' ? item[this.valueList[idx]] : this.changeType === 'ZB_DOUBLE_AMOUNT' || this.changeType === 'ZB_DOUBLE_COUNT' ? this.getVal(item, res)
                            : this.truncateToFixed(item[this.valueList[idx]] * 100, 2),
                        count: this.changeType === 'ZB_DOUBLE_AMOUNT' ? item.zbDoubleAmount : this.changeType === 'ZB_DOUBLE_COUNT' ? item.zbDoubleCount : ''
                    }
                })
                this.len = this.topList.length - 3
            })
        },
        getVal(item, res) {
            let num = this.changeType === 'ZB_DOUBLE_AMOUNT' ? item.zbDoubleAmount : this.changeType === 'ZB_DOUBLE_COUNT' ? item.zbDoubleCount : '';
            let pre = num / (res[0][this.changeType === 'ZB_DOUBLE_AMOUNT' ? 'zbDoubleAmount' : 'zbDoubleCount'] + 10);
            return this.truncateToFixed(pre * 100, 2);
        },
        truncateToFixed(val, decimals) {
            let value = parseFloat(val.toFixed(decimals));
            // const integerPart = Math.trunc(value); // 获取整数部分
            // const decimalPart = value - integerPart; // 获取小数部分
            // const factor = Math.pow(10, decimals);
            // const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return value; // 组合整数部分和小数部分
        }
    }
}
</script>
<style lang="scss" scoped>
.middel-box {
    width: 935px;
    height: 600px;
    background: #fff;
    box-sizing: border-box;
    padding: 16px;
}

.center {
    width: 100%;
}

.top-list {
    margin-top: 16px;
    max-height: 430px;
    overflow-y: auto;


    .top-item {
        display: flex;
        height: 42px;
        line-height: 42px;
        flex-wrap: wrap;

        .name {
            width: 80px;
        }

        .progress-box {
            width: 608px;

            .progress {
                height: 10px;
                width: 583px;
                margin-top: 14px;
            }
        }

        div {
            margin: 0 8px;
        }

        img {
            margin: 8px 10px;
        }

        .num {
            color: #fff;
            background: #0b82ff;
            border-radius: 100px;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            margin: 10px;
            font-size: 14px;
        }

        .icon2 {
            margin: 8px 5px;
        }

        .progress-text {
            width: 80px;
        }
    }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.top-list::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #F5F5F5;
}

.top-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background-color: #F5F5F5;
}

.top-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}
</style>